#include("/front/family/_layout.html")
#@layout()
#define layoutImportcss()
    <link rel="stylesheet" href="/front/css/framework7-icons.css">
    <link rel="stylesheet" href="/front/css/card.css">
    <link rel="stylesheet" href="/front/css/infinite-scroll.css">
    <link rel="stylesheet" href="/front/css/preloader.css">
    <link rel="stylesheet" href="/front/css/fab.css">
    <link rel="stylesheet" href="/front/css/popup.css">
    <link rel="stylesheet" href="/front/css/grid.css">
#end
#define layoutHead()
	<title>设置</title>
#end
#define layoutHome()

#include("inc_toolbar.html")

<div class="page-content childrearing-page-content infinite-scroll-content">
	<!-- <div class="banner"><img src="../img/u481.jpg" alt=""></div> -->

	<div class="toolbar tabbar tabbar-scrollable">
		<div class="toolbar-inner" id="toolbar_tab_title">
		</div>
	</div>

	<div class="tabs" id="toolbar_tab_data">
	</div>

	<!--加载gif图-->
	<div class="preloader infinite-scroll-preloader"></div>
</div>
#end
#define layoutImportjs()
#end
#define layoutScript()
<script type="text/javascript">
	var login_user_id = #(login_user_id);
	
	var loading = false;
	var cur_pageNo = 1;
	var cur_pageCount = 1;
	var cur_link_course = -100;
	var cat_id = 0;
	
	// 监听滚动事件
	$$('.infinite-scroll-content').on('infinite', function () {
		if (loading) return;
	
		if (cur_pageNo>=cur_pageCount){
			//app.infiniteScroll.destroy('.infinite-scroll-content');
			// $$('.infinite-scroll-preloader').html('没有更多数据了！')
			// 								.addClass('loaded')
			// 								.removeClass('preloader')
			// 								.removeClass('infinite-scroll-preloader');
			// 
			// 多分类使用,不能remove,直接返回
			return;
		}
	
		// Set loading flag
		loading = true;
	
	    getPage(cur_pageNo+1);
	});
		
	function bindTabEvent(){
		$$(".tabbar .tab-link").on("click", function(){
			cat_id = $$(this).attr('cat_id');
			cur_pageNo = $$(this).attr('pageNo');
			cur_pageCount = $$(this).attr('pageCount');
			cur_link_course = $$(this).attr('link_course');
			
			$$(this).addClass("tab-link-active").siblings(".tabbar .tab-link").removeClass("tab-link-active");
			$$("#tab-" + cat_id).addClass("tab-active").siblings().removeClass("tab-active");
			
			if (cur_pageNo == "1" && cur_pageCount=="-1"){
				getPage(cur_pageNo);
				$$('.infinite-scroll-preloader').show();
			}else if (cur_pageNo>=cur_pageCount){
				$$('.infinite-scroll-preloader').hide();	
			}else{
				$$('.infinite-scroll-preloader').show();
			}
		});
	}
	
	function getPage(pageNo){
		var surl = "/front/family/nurture/getPage?pageNo=" + pageNo + "&pageSize=" + global_pagesize+ "&typeid=2&catid="+cat_id+"&usestate=1&link_course="+cur_link_course;
		sendPost(surl, null, function(res){
			//console.log(res);
			loading = false;
			cur_pageNo = pageNo;
			$$('#tab-title-' + cat_id).attr('pageNo', cur_pageNo);
			
			if (pageNo == 1){
				if (cat_id == 0 && isJsonProps(res, 'listcat')){
					formatTabHtml(res.listcat);
				}
				$$('#tab-' + cat_id + ' ul').html('');
			}
			if (cur_link_course == 0 && res.hasOwnProperty("pageData")){
				if (res.pageData.list.length>0){
					cur_pageCount = res.pageData.totalPage;
					var shtml = '';
					for (var i = 0; i < res.pageData.list.length; i++) {
						var jdata = res.pageData.list[i];
						shtml += getTemplateHtml(jdata);
					}
					//console.log(shtml);
					$$('#tab-' + cat_id + ' ul').append(shtml);
					
				}else if(cur_pageCount != '-1'){
					cur_pageCount = 0;
				}
			}
			if (cur_link_course == 1 && res.hasOwnProperty("pageCourses")){
				if (res.pageCourses.list.length>0){
					cur_pageCount = res.pageCourses.totalPage;
					var shtml = '';
					for (var i = 0; i < res.pageCourses.list.length; i++) {
						var jdata = res.pageCourses.list[i];
						shtml += getCourseHtml(jdata);
					}
					//console.log(shtml);
					$$('#tab-' + cat_id + ' ul').append(shtml);
					
				}else if(cur_pageCount != '-1'){
					cur_pageCount = 0;
				}
			}
			if (cur_link_course == -100){
				cur_pageCount = 1;
				var arrdata = [];
				if (res.hasOwnProperty("pageData")){
					for (var i = 0; i < res.pageData.list.length; i++) {
						var jdata = res.pageData.list[i];
						var newdata = {};
						newdata['link_course'] = 0;
						newdata['add_time'] = jdata.add_time;
						newdata['jdata'] = jdata;
						arrdata.push(newdata);
					}
				}
				if (res.hasOwnProperty("pageCourses")){
					for (var i = 0; i < res.pageCourses.list.length; i++) {
						var jdata = res.pageCourses.list[i];
						var newdata = {};
						newdata['link_course'] = 1;
						newdata['add_time'] = jdata.add_time;
						newdata['jdata'] = jdata;
						arrdata.push(newdata);
					}
				}
				arrdata.sort(function(a, b){
					return a.add_time < b.add_time;
				});
				//console.log(arrdata);
				var shtml = '';
				for(var i=0;i<arrdata.length;i++){
					var jdata = arrdata[i];
					if (jdata.link_course==0){
						shtml += getTemplateHtml(jdata.jdata);
					}else if (jdata.link_course==1){
						shtml += getCourseHtml(jdata.jdata);
					}
				}
				$$('#tab-' + cat_id + ' ul').append(shtml);
			}
			if (cur_pageNo>=cur_pageCount){
				$$('.infinite-scroll-preloader').hide();
				$$('#tab-' + cat_id + ' ul').append('<li style="text-align: center;margin:10px; color:#ccc">没有更多数据了！</li>');
			}
			$$('#tab-title-' + cat_id).attr('pageCount', cur_pageCount);
		});
	}
	
	
	function formatTabHtml(listcat){
		var tabhtml = '<a href="javascript:;" class="tab-link tab-link-active" id="tab-title-0" link_course="-100" cat_id="0" pageNo="1" pageCount="-1">最新</a>';
		var tabpagehtml = '<div id="tab-0" class="tab-content tab tab-active"><ul></ul></div>';
		for(var i=0; i<listcat.length; i++){
			var jdata = listcat[i];
			tabhtml += '<a href="javascript:;" class="tab-link" id="tab-title-'+jdata.cat_id+'" cat_id="'+jdata.cat_id+'" link_course="'+jdata.link_course+'" pageNo="1" pageCount="-1">'+jdata.cat_name+'</a>';
			
			tabpagehtml += '<div id="tab-'+jdata.cat_id+'" class="tab-content tab"><ul></ul></div>';
		}
		$$('#toolbar_tab_title').html(tabhtml);
		$$('#toolbar_tab_data').html(tabpagehtml);
		bindTabEvent();
	}
	
	function getTemplateHtml(jdata){
		var shtml = `
				<li class="card">
					<div class="align-items-flex-end">
						<a class="link external article-title-color" href="/front/family/nurture/article?id=${jdata.article_id}"><img style="height:200px" src="${getZoomFileUrlwh(jdata.list_pic_url, 394, 120)}"></a>
						
					</div>
					<div class="card-content card-content-padding">
						<p><a class="link external article-title-color" style="margin-top:5px; font-size:16px" href="/front/family/nurture/article?id=${jdata.article_id}">${jdata.article_title}</a>
						</p>
					</div>
				</li>
		`;
		return shtml;
	}
	function getCourseHtml(jdata){
		var shtml = `
				<li class="card">
					<div class="align-items-flex-end">
						<a class="link external article-title-color" href="/front/family/html/course_detaile?id=${jdata.course_id}"><img style="height:200px" src="${getZoomFileUrlwh(jdata.front_cover_url, 394, 120)}"></a>
						
					</div>
					<div class="card-content card-content-padding">
						<p><a class="link external article-title-color" style="margin-top:5px; font-size:16px" href="/front/family/html/course_detaile?id=${jdata.course_id}">${jdata.course_name}</a>
						</p>
					</div>
				</li>
		`;
		return shtml;
	}

	getPage(1);
</script>
#end